<template>
	<view class="content">
		<scroll-view scroll-y="true"
					 class="scroll-Y">
			<view class="form-item">
					<view class="item1">
						<u-form :model="firstForm" ref="firstForm">
							<u-form-item label="甲方(送养人)" prop="firstName">
								<u-input v-model="firstForm.firstName" :disabled="first" placeholder="您的真实姓名" />
							</u-form-item>
							<u-form-item label="联系号码" prop="firstPhone">
								<u-input v-model="firstForm.firstPhone" :disabled="first" placeholder="您的手机号码" />
							</u-form-item>
							<u-form-item label="住址" prop="firstAddress">
								<u-input v-model="firstForm.firstAddress" :disabled="first" placeholder="您的具体住址" />
							</u-form-item>
							<u-form-item label="身份证号码" prop="firstIdCard">
								<u-input class="input" disabled v-model="firstForm.firstIdCard" :clearable="false" placeholder="18位居民身份证号码" />
								<image v-if="firstForm.firstIdCard === null" class="img" style="width: 60rpx;height: 40rpx;margin-top: 10rpx;" src="@/static/img/up1.png" @click="upload(1)"></image>
								<image v-else class="img" style="width: 60rpx;height: 40rpx;margin-top: 10rpx;" src="@/static/img/up2.png" @click="upload(1)"></image>
							</u-form-item>
						</u-form>
					</view> 
					<view class="item1">
						<u-form :model="secondForm" ref="secondForm">
							<u-form-item label="乙方(领养人)" prop="secondName">
								<u-input v-model="secondForm.secondName" :disabled="second" placeholder="您的真实姓名" />
							</u-form-item>
							<u-form-item label="联系号码" prop="secondPhone">
								<u-input v-model="secondForm.secondPhone" :disabled="second" placeholder="您的手机号码" />
							</u-form-item>
							<u-form-item label="住址" prop="secondAddress">
								<u-input v-model="secondForm.secondAddress" :disabled="second" placeholder="您的具体住址" />
							</u-form-item>
							<u-form-item label="身份证号码" prop="secondIdCard">
								<u-input class="input" disabled v-model="secondForm.secondIdCard" :clearable="false" placeholder="18位居民身份证号码" />
								<image v-if="secondForm.secondIdCard === null" class="img" style="width: 60rpx;height: 40rpx;margin-top: 10rpx;" src="@/static/img/up1.png" @click="upload(0)"></image>
								<image v-else class="img" style="width: 60rpx;height: 40rpx;margin-top: 10rpx;" src="@/static/img/up2.png" @click="upload(0)"></image>
							</u-form-item>
						</u-form>
					</view>
					<view class="item3">
						<u-form :model="thirdForm" ref="thirdForm">
							<u-form-item label="丙方(领养人)" prop="name">
								<u-input v-model="thirdForm.name" disabled />
							</u-form-item>
							<u-form-item label="品种" prop="typeName">
								<u-input v-model="thirdForm.typeName" disabled />
							</u-form-item>
							<u-form-item label="性别" prop="sex">
								<u-input v-model="thirdForm.sex" disabled />
							</u-form-item>
							<u-form-item label="宠龄" prop="age">
								<u-input class="input" v-model="thirdForm.age" disabled />
							</u-form-item>
						</u-form>
					</view>
			</view>
		</scroll-view>
		<view class="button">
			<u-button class="styleCss1" hover-class="none">第一页（共三页）</u-button>
			<u-button type="primary" class="styleCss2" hover-class="none" @click="nextClick()">下一页</u-button>
		</view>
	</view>
</template>

<script>
	
	import common from '../../../utils/common.js'
	
export default {
	data() {
		return {
			agreementId: '',
			writer: '', // 甲方为1， 乙方为0
			firstForm: {},
			secondForm: {},
			thirdForm: {},
			firstRules: {
				firstName: [{ required: true, message: '请输入您的真实姓名', trigger: 'blur' }],
				firstPhone: [{ required: true, message: '请输入您的手机号', trigger: 'change' },
				{ pattern: /^1[3|4|5|7|8|6|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
				firstAddress: [
					{ required: true, message: '请输入您的具体住址', trigger: 'blur' }],
				firstIdCard: [{ required: true, message: '请上传您的身份证', trigger: 'blur' }]
			},
			secondRules: {
				secondName: [{ required: true, message: '请输入您的真实姓名', trigger: 'blur' }],
				secondPhone: [{ required: true, message: '请输入您的手机号', trigger: 'change' },
				{ pattern: /^1[3|4|5|7|8|6|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
				secondAddress: [
					{ required: true, message: '请输入您的具体住址', trigger: 'blur' }],
				secondIdCard: [{ required: true, message: '请上传您的身份证', trigger: 'blur' }]
			},
			agreeInfo: {},
			fromTo: false,
			name: ''
		}
	},
	computed: {
		first () {
			return this.writer === 0 // 如果等于0返回TRUE，则是禁止输入
		},
		second () {
			return this.writer === 1 // 如果等于1返回TRUE，则是禁止输入
		}
	},
	methods: {
		nextClick () {
			this.agreeInfo = this.$store.getters.getAgreeInfo
			if (this.writer === 1) {
				let flag = common.checkRules(this.firstForm, this.firstRules)
				// 自定义表单验证，如果flag为true时表单验证通过,反之为false
				if (flag) {
					if (this.nameVerify(this.firstForm.firstName)) {
						this.agreeInfo.firstName = this.firstForm.firstName
						this.agreeInfo.firstPhone = this.firstForm.firstPhone
						this.agreeInfo.firstAddress = this.firstForm.firstAddress
						this.$store.commit('setAgreeInfo', this.agreeInfo)
						uni.navigateTo({
						    url: './petAgreementTwo'
						});
					}
				}
			} else {
				let flag = common.checkRules(this.secondForm, this.secondRules)
				// 自定义表单验证，如果flag为true时表单验证通过,反之为false
				if (flag) {
					if (this.nameVerify(this.secondForm.secondName)) {
						this.agreeInfo.secondName = this.secondForm.secondName
						this.agreeInfo.secondPhone = this.secondForm.secondPhone
						this.agreeInfo.secondAddress = this.secondForm.secondAddress
						this.$store.commit('setAgreeInfo', this.agreeInfo)
						uni.navigateTo({
						    url: './petAgreementTwo'
						});
					}
				}
			}
		},
		// 校验输入的姓名是否和身份证上的一致
		nameVerify (name) {
			if (this.name !== name) {
				uni.showToast({
					title: '请输入身份证上的真实姓名',
					icon: 'none'
				})
				return false
			} else {
				return true
			}
		},
		// 身份证上传
		upload (e) {
			this.agreeInfo = this.$store.getters.getAgreeInfo
			// 甲方
			this.agreeInfo.firstName = this.firstForm.firstName
			this.agreeInfo.firstPhone = this.firstForm.firstPhone
			this.agreeInfo.firstAddress = this.firstForm.firstAddress
			this.agreeInfo.firstIdCard = this.firstForm.firstIdCard
			// 乙方
			this.agreeInfo.secondName = this.secondForm.secondName
			this.agreeInfo.secondPhone = this.secondForm.secondPhone
			this.agreeInfo.secondAddress = this.secondForm.secondAddress
			this.agreeInfo.secondIdCard = this.secondForm.secondIdCard
			// 丙方
			this.agreeInfo.name = this.thirdForm.name
			this.agreeInfo.age = this.thirdForm.age
			this.agreeInfo.typeName = this.thirdForm.typeName
			this.agreeInfo.sex = this.thirdForm.sex
			this.$store.commit('setAgreeInfo', this.agreeInfo)
			// 判断用户是甲方还是乙方，来控制身份证上传的跳转
			if (this.writer === e) {
				uni.navigateTo({
				    url: './identityCard?agreementId=' + this.agreementId
				});
			}
		},
		// 获取协议信息
		getAgreementInfo (agreementId) {
			this.$request(this.commonApi.agreeInfo + agreementId, 'Get').then(res => {
				let items = res.data
				if (items.code !== 200) {
					uni.showToast({
						title: items.msg,
						icon: 'none'
					})
				} else {
					this.writer = items.data.writer
					if (this.writer === 1) {
						this.name = items.data.firstName
					} else {
						this.name = items.data.secondName
					}
					// 甲方
					this.firstForm.firstName = items.data.firstName
					this.firstForm.firstPhone = items.data.firstPhone
					this.firstForm.firstAddress = items.data.firstAddress
					this.firstForm.firstIdCard = items.data.firstIdCard
					// 乙方
					this.secondForm.secondName = items.data.secondName
					this.secondForm.secondPhone = items.data.secondPhone
					this.secondForm.secondAddress = items.data.secondAddress
					this.secondForm.secondIdCard = items.data.secondIdCard
					// 丙方
					this.thirdForm.name = items.data.name
					this.thirdForm.age = items.data.age + '岁'
					this.thirdForm.typeName = items.data.typeName
					if (items.data.sex === 1) {
						this.thirdForm.sex = '公'
					} else {
						this.thirdForm.sex = '母'
					}
					this.$store.commit('setAgreeInfo', items.data)
				}
			})
		}
	},
	mounted () {
		// 判断页面是否从上传身份证页面过来的
		if (this.fromTo) {
			this.agreeInfo = this.$store.getters.getAgreeInfo
			this.writer = this.agreeInfo.writer
			// 甲方
			this.firstForm.firstName = this.agreeInfo.firstName
			this.firstForm.firstPhone = this.agreeInfo.firstPhone
			this.firstForm.firstAddress = this.agreeInfo.firstAddress
			this.firstForm.firstIdCard = this.agreeInfo.firstIdCard
			// 乙方
			this.secondForm.secondName = this.agreeInfo.secondName
			this.secondForm.secondPhone = this.agreeInfo.secondPhone
			this.secondForm.secondAddress = this.agreeInfo.secondAddress
			this.secondForm.secondIdCard = this.agreeInfo.secondIdCard
			// 丙方
			this.thirdForm.name = this.agreeInfo.name
			this.thirdForm.age = this.agreeInfo.age
			this.thirdForm.typeName = this.agreeInfo.typeName
			this.thirdForm.sex = this.agreeInfo.sex
		} else {
			this.getAgreementInfo(this.agreementId)
		}
	},
	onLoad (option) {
		this.agreementId = parseInt(option.agreementId)
		uni.setStorageSync('agreementId', this.agreementId);
		this.fromTo = option.fromTo
		this.name = option.name
	}
};
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
.content {
	height: 100vh;
	position: relative;
	.scroll-Y {
		height: calc(100vh - 120rpx);
	}
	.form-item {
		/deep/ .u-form-item {
			padding: 10rpx 30rpx!important;
			position: relative;
		}
		/deep/ .u-input__input {
			text-align: right!important;
		}
		/deep/ .u-form-item--left {
			width: 196rpx!important;
		}
		/deep/ .u-form-item--left__content {
			width: 196rpx!important;
		}
		.item1 {
			background-color: #fff;
			margin-top: 12rpx;
			.img {
				position: absolute;
				top: 20rpx;
				right: 10rpx;
			}
			.input /deep/ .u-input__input {
				margin-right: 50rpx;
			}
		}
		.item3 {
			background-color: #fff;
			margin-top: 12rpx;
		}
	}
	.button{
		width: 100%;
		height: 120rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: #fff;
		/deep/ .u-btn--primary{
			background: #FFCC00;
		}
		.styleCss1{
			width: 300rpx;
			height: 60rpx;
		}
		.styleCss2{
			width: 300rpx;
			height: 60rpx;
		}
	}
}
</style>
